.home {
  background: linear-gradient(90deg,
      rgba(255, 242, 231, 1) 4%,
      rgba(255, 230, 244, 1) 55%);

  .ceiling {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    height: 1.5rem;
    display: flex;
    z-index: 999;

    .anticon-message {
      font-size: 0.5rem;
      margin-left: 0.5rem;
      margin-top: 0.5rem;
    }

    h2 {
      font-size: 0.4rem;
      margin-top: 0.4rem;
      margin-left: 2rem;
    }
  }

  .content {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    height: calc(100vh - 1rem);
    background-color: rgb(255, 255, 255);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding-top: 0.5rem;

    .icon {
      font-size: 0.25rem;
      padding-left: 0.2rem;
      color: black;
    }

    .adm-search-bar-input-box {
      border-radius: 0.5rem;
      height: 0.7rem;
    }

    .adm-input-element {
      font-size: 0.2rem;
    }

    .anticon-caret-down {
      margin-left: 0.1rem;
      padding-right: 0.2rem;
      border-right: 1px solid rgb(192, 188, 188);
    }

    .option {
      ul {
        padding: 0;
        list-style-type: none;
        margin-top: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;

        li {
          display: inline-block;
          width: 19%;
          text-align: center;
          margin: 0 0.02rem;
          font-size: 0.3rem;
        }

        img {
          width: 0.8rem !important;
          height: 0.8rem;
        }
      }
    }

    .recommend {
      height: 3.5rem;
      display: flex;

      .left {
        width: 35%;
        background-image: url('../../imgs/婚纱照花费.png');
        background-size: 100% 80%;
        background-repeat: no-repeat;
        border-radius: 0.2rem;
        position: relative;

        .cover {
          width: 100%;
          height: calc(100% - 2.65rem);
          position: absolute;
          bottom: 0;
          background: linear-gradient(90deg,
              rgba(251, 131, 91, 1) 4%,
              rgba(251, 153, 120, 1) 55%);
          border-bottom-left-radius: 0.2rem;
          border-bottom-right-radius: 0.2rem;
        }

        h3 {
          margin-left: 0.2rem;
          color: rgb(254, 244, 241);
          font-size: 0.3rem;
          margin-bottom: -0.06rem;
        }

        span {
          margin-left: 0.2rem;
          color: rgb(253, 178, 159);
          font-size: 0.25rem;

          .anticon-right {
            background-color: aliceblue;
            border-radius: 50%;
            color: rgb(252, 197, 179);
            margin-left: 0.15rem;
          }
        }
      }

      .right {
        width: 63%;
        margin-left: 2%;
        border-radius: 0.2rem;

        .top {
          height: 43%;
          background-color: aqua;
          border-radius: 0.2rem;
          background-image: url('../../imgs/婚宴酒店报价.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          overflow: hidden;

          .title {
            padding-left: 0.2rem;
            position: relative;
            margin-top: 0.2rem;

            .concentration {
              img {
                width: 0.45rem;
                height: 0.45rem;
                position: absolute;
                left: 0.19rem;
                top: -0.03rem;
              }

              span {
                display: inline-block;
                height: 0.35rem;
                width: 1.5rem;
                font-size: 0.2rem;
                background-color: rgb(79, 125, 204);
                border-radius: 0.2rem;
                padding-left: 0.45rem;
                color: rgb(156, 178, 221);
              }
            }

            h3 {
              color: rgb(254, 244, 241);
              font-size: 0.3rem;
              margin-bottom: 0;
            }

            div {
              color: rgb(183, 205, 234);
              font-size: 0.2rem;

              span {
                display: inline-block;
                color: rgb(159, 188, 238);
                background-color: rgb(208, 241, 253);
                border-radius: 2rem;
                line-height: 0.2rem;

                span {
                  margin-left: 0.05rem;
                }

                .anticon-right {
                  font-size: 0.2rem;
                  margin-left: 0;
                  margin-right: 0.05rem;
                }
              }
            }
          }
        }

        .bottom {
          display: flex;
          margin-top: 2%;
          height: 55%;
          border-radius: 0.2rem;

          .letf {
            width: 49%;
            background-image: url('../../imgs/网红好店.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-right: 2%;
            border-radius: 0.2rem;
            position: relative;
            padding-left: 0.2rem;

            .covers {
              position: absolute;
              bottom: 0;
              background-color: rgba(169, 177, 159, 0.5);
              width: 100%;
              height: 45%;

              h3 {
                color: rgb(254, 244, 241);
                font-size: 0.3rem;
                margin-bottom: -0.06rem;
              }

              span {
                color: rgb(221, 221, 214);
                font-size: 0.25rem;

                .anticon-right {
                  background-color: aliceblue;
                  border-radius: 50%;
                  color: rgb(221, 221, 214);
                  margin-left: 0.15rem;
                }
              }
            }
          }

          .right {
            width: 49%;
            border-radius: 0.2rem;
            position: relative;
            background-image: url('../../imgs/热门婚纱.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding-left: 0.2rem;

            .covers {
              width: 100%;
              position: absolute;
              bottom: 0;
              background-color: rgba(202, 198, 208, 0.5);

              h3 {
                color: rgb(254, 244, 241);
                font-size: 0.3rem;
                margin-bottom: -0.06rem;
              }

              div {
                color: rgb(231, 231, 229);
                font-size: 0.2rem;

                span {
                  display: inline-block;
                  color: rgb(194, 194, 188);
                  background-color: aliceblue;
                  border-radius: 2rem;
                  line-height: 0.2rem;

                  span {
                    margin-left: 0.05rem;
                  }

                  .anticon-right {
                    font-size: 0.2rem;
                    margin-left: 0;
                    margin-right: 0.05rem;
                  }
                }
              }
            }
          }
        }
      }
    }

    // 标签页
    .ant-tabs-nav-wrap {
      height: 0.5rem;
    }

    .ant-tabs-tab {
      width: 0.5rem;
    }

    .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
      font-size: 0.3rem;
      color: #000;
    }

    .ant-tabs-ink-bar {
      width: 0.3rem;
      background-color: rgb(255, 82, 115);
    }
  }
}